/* COLORS */
@app-background: @color-info-50;
@dex-background: @color-basic-100;
@white-btn-bg: #fff;
@color-white: #fff;
@color-black: #000;
@dropdown-shadow: 0 2px 14px 0 rgba(31, 39, 61, 0.15);
@header-logout-border-color: #f0f4fa;
@fader-opacity: .3;
@fader-background: @color-basic-900;
@header-dropdown-hover: @color-info-50;

@dex-selected-item-bg: @color-info-50;

@mobile-menu-background: @color-basic-900;
@mobile-menu-background-hover: fadein(@color-basic-700, 80%);
@mobile-menu-link: @color-white;
@mobile-menu-link-hover: @color-white;
@mobile-menu-border: @color-basic-700;
@mobile-menu-inner-border: @color-basic-700;

@color-disabled-50: #fafafa;
@color-disabled-100: #f0f0f0;
@color-disabled-200: #e2e2e2;
@color-disabled-300: #d3d3d3;
@color-disabled-400: #bcbcbc;
@color-disabled-500: #999999;
@color-disabled-600: #8c8c8c;
@color-disabled-700: #777777;
@color-disabled-900: #2d2d2d;

@color-basic-50: #f8f9fb;
@color-basic-100: #edf0f4;
@color-basic-200: #dae1e9;
@color-basic-300: #c5d0de;
@color-basic-400: #b3b7bc;
@color-basic-500: #9ba6b2;
@color-basic-600: #7f8fa4;
@color-basic-700: #4e5c6e;
@color-basic-900: #263241;

@color-info-50: #F5F8FC;
@color-info-100: #dfeaf8;
@color-info-200: #c5d9e8;
@color-info-300: #a8c6df;
@color-info-300: #a8c6df;
@color-info-400: #8dabc4;
@color-info-500: #7995b9;

@color-accent-50: #e9e9eb;
@color-accent-100: #ced0da;

@color-submit-50: #eef5fe;
@color-submit-100: #dee7fe;
@color-submit-200: #bacaf4;
@color-submit-300: #5a81ea;
@color-submit-400: #1f5af6;
@color-submit-500: #1751ec;
@color-submit-600: #2051d3;
@color-submit-700: #1a4ac8;
@color-submit-800: #0d3dba;

@color-success-50: #dbf5d4;
@color-success-100: #a4ec9b;
@color-success-200: #a6c1b7;
@color-success-300: #4ece3d;
@color-success-400: #4aad02;
@color-success-500: #39a12c;
@color-success-600: #008b55;
@color-success-700: #007447;
@color-success-800: #005937;

@color-warning-50: #fff5df;
@color-warning-100: #ffebc0;
@color-warning-400: #f8b700;
@color-warning-500: #e9ac00;
@color-warning-600: #f89300;

@color-error-100: #ffe4e4;
@color-error-200: #f4b1a5;
@color-error-400: #e5494d;
@color-error-500: #ef4829;
@color-error-600: #d1383c;
@color-error-700: #b72125;

@color-graph-ask: rgba(229, 73, 77, 0.1);
@color-graph-bid: rgba(90, 129, 234, 0.1);

/* HARDCODE */
@white-only: #FFF;

// Progress bars
@color-redbar-200: rgba(229, 73, 77, 0.2);
@color-redbar-400: rgba(229, 73, 77, 0.4);
@color-redbar-1000: rgba(229, 73, 77, 1.0);
@color-bluebar-200: rgba(90, 129, 234, 0.2);
@color-bluebar-400: rgba(90, 129, 234, 0.4);
@color-bluebar-1000: rgba(90, 129, 234, 1.0);

// Misc
@asset-label-suspicious: rgba(38, 50, 65, 0.15);
@color-checkbox-border: #c5d9e8;
@default-icon-size: 28px;
@low-icon-size: 20px;
@label-background-color: @color-basic-100; //helpIcon
@qr-margin: 0 auto;
@custom-asset-marker-bg: @color-basic-500; //qualified
@custom-asset-marker-border: #fbfcfd;
@filter-select-background: @color-white;
@input-focused-border: @color-submit-400;
@input-search-icon-bg: @color-basic-500;
@input-toggle-bg-hover: @color-basic-300;

/* TYPOGRAPHY */
@font-roboto-light: 'Roboto-Light', sans-serif;
@font-roboto-regular: 'Roboto-Regular', sans-serif;
@font-roboto-medium: 'Roboto-Medium', sans-serif;

/* SIZES */

// General
@padding-main-layout: 10px;
@width-left-menu: 70px;
@height-header: 70px;

// Controls
@height-control-tiny: 30px;
@padding-control-tiny: 7px 16px;
@font-size-control-tiny: 12px;

@height-control-small: 36px;
@padding-control-button-small: 10px 23px;
@padding-control-small: 9px 16px;
@font-size-control-small: 13px;

@height-control-micro: 30px;
@padding-control-button-micro: 4px 19px;
@font-size-control-micro: 11px;

// Medium
@height-control: 42px;
@padding-control-button: 40px 12px;
@padding-control: 12px 16px;
@font-size-control: 15px;

// Large
@height-control-big: 54px;
@padding-control-big: 17px 16px;
@font-size-control-big: 17px;

// Responsive
@height-control-big-responsive: 42px;
@padding-control-big-responsive-horizontal: 12px;
@padding-control-big-responsive: 12px 16px 12px @padding-control-big-responsive-horizontal;
@font-size-control-big-responsive: 15px;

@text-icon-size: 16px;

// Borders
@border-radius: 4px;

@width-media-tiny: 768px;
@width-media-small: 1024px;
@width-media-normal: 1200px;

// Dialog
@backdrop-opacity: .49;

// Shadows
@shadow-type-1: 0 1px 5px 0 rgba(146, 151, 162, 0.1);
@shadow-type-2: 1px 1px 2px rgba(61,61,61,0.5);
@shadow-main-default: 0 1px 5px 0 rgba(182, 184, 189, 0.2);
@shadow-main-hover: 0 1rem 2.5rem rgba(58,78,136,0.1),
                    0 0.5rem 1rem -0.75rem rgba(58,78,136,0.1);
@shadow-all-center: 0 0 8px 0 rgba(182, 184, 189, 0.25);
@shadow-menu-left: 1px 0 6px 0 rgba(182, 184, 189, 0.2);
@shadow-table-center: 0 0 6px 0 rgba(182, 184, 189, 0.3);
@shadow-dex-open: 0px 6px 20px rgba(0, 0, 0, .5);
@shadow-create-order: 0px 6px 13px rgba(0, 0, 0, .6);
@shadow-menu-top: 0px 2px 5px rgba(0, 0, 0, 0.1);
@shadow-notification: 0px 0 5px 1px rgba(0, 0, 0, 0.1);
@shadow-buttons-default: 0 2px 4px 0 rgba(218, 225, 233, 0.5);
@shadow-buttons-hover: 0 2px 8px 1px rgba(199, 210, 222, 0.6);
@shadow-tooltip-confirm: 0 0 19px rgba(97, 116, 144, 0.25);
@shadow-dex-welcome: 0 1px 4px 0 rgba(203, 221, 239, 0.2);

// Hovers
@hover-default: rgba(248, 249, 251, .5);

//Mask
@mask-default: #212121;

// Selection
@selection-bg: #accef7;

@circle-loader-bg-sell: @color-error-100;
@circle-loader-bg-buy: @color-submit-50;

@getStartedContentWidth: 440px;
@getStartedFooterWidth: 224px;
@getStartedContentPadding: 20px;
@welcomeSectionWrapperPaddingLarge: 80px;
@welcomeSectionWrapperPaddingMedium: 40px;
@welcomeSectionWrapperPaddingSmall: 20px;
@dexLayoutWatchlist: 340px;
@dexLayoutOrderBook: 335px;
@dexLayoutCreateOrder: 335px;
@dexLayoutGap: 5px;

